<template>
  <Skeleton active :paragraph="{ rows: 5 }" :loading="loading">
    <div v-if="chartDatas && chartDatas.length > 0" ref="chartRef" class="w-full h-50"></div>
    <div v-else-if="!loading" class="w-full h-50 flex items-center justify-center">
      <div class="text-center">
        <div class="text-gray-400 text-lg">暂无心率数据</div>
        <div class="text-gray-300 text-sm mt-2">暂无相关记录</div>
      </div>
    </div>
  </Skeleton>
</template>
<script lang="ts" setup>
  import { onMounted, ref, Ref, computed, defineProps } from 'vue';
  import { Skeleton } from 'ant-design-vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import type { EChartsOption } from 'echarts';
  import { listHeartRate } from '/@/api/sys/desktopApi';

  interface Props {
    phone?: string;
  }
  const props = defineProps<Props>();
  const phone = props.phone ?? '13021646422';
  // 假设 listTemprature 返回的类型是一个包含 d 和 v 属性的对象
  interface TempratureResponse {
    d: string; // 假设这是时间或日期的数组
    v: number; // 假设这是对应的体温值数组
  }
  const loading = ref(true);
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const chartDatas = ref<TempratureResponse[]>([]);
  onMounted(async () => {
    try {
      // 调用异步函数并等待结果
      const response = await listHeartRate({ phone });
      console.log('心率图表', response);
      chartDatas.value = response || [];

      if (chartDatas.value && chartDatas.value.length > 0) {
        const xAxisData = computed(() => chartDatas.value.map((item) => item.d));
        const seriesData = computed(() => chartDatas.value.map((item) => item.v));
        const options: EChartsOption = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#019680',
              },
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxisData.value,
          },
          yAxis: [
            {
              type: 'value',
              max: 100,
              min: 60,
              splitNumber: 6,
              axisLabel: {
                formatter: function (value) {
                  return value.toFixed(1);
                },
              },
            },
          ],
          grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
          series: [
            {
              smooth: true,
              name: '心率',
              data: seriesData.value,
              type: 'line',
              areaStyle: {},
              itemStyle: {
                color: '#019680',
              },
            },
          ],
        };
        setOptions(options);
      }
      loading.value = false;
    } catch (error) {
      console.error(error);
      loading.value = false;
    }
  });
</script>
